<!DOCTYPE html>
<html lang="zh-cmn-Hans">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<title>分类2</title>
		<link rel="stylesheet" href="../../css/ui.min.css" />
		<link rel="stylesheet" href="../../css/mui.min.css" />
		<link rel="stylesheet" href="../../css/style.css" />
	</head>
	<style>
		.mui-control-content {
			min-height: 800px;
		}
		.mui-control-content .mui-loading {
			margin-top: 50px;
		}
		.ui-search-bar__cancel-btn {
			color: #84BEAB;
			font-size: 1rem;
		}
		.sbt {
			color: #fff;
			margin-top: 10px;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			line-height: 20px;
			background: #3ca582;
			padding: 4px;
		}
		.price{
			color:#343434;
		}
		.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
			color: #3ca582;
		}
	</style>
	<body ontouchstart>
		<div class="ui-content" id="app">
			<div class="ui-search-bar" id="searchBar">
				<form class="ui-search-bar__form">
					<div class="ui-search-bar__box">
						<i class="iconfont icon-sousuo"></i>
						<input type="search" class="ui-search-bar__input" id="searchInput" placeholder="搜索" required />
						<a href="javascript:" class="ui-icon-clear iconfont icon-close-copy" id="searchClear"></a>
					</div>
					<label class="ui-search-bar__label" id="searchText">
						<i class="iconfont icon-sousuo"></i>
						<span>搜索</span>
					</label>
				</form>
				<a href="javascript:;" class="ui-search-bar__cancel-btn" id="searchCancel">取消</a>
			</div>
			<div class="mui-content">
				<div id="slider" class="mui-slider">
					<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
						<a class="mui-control-item" href="#item1mobile">
							蔬菜区
						</a>
						<a class="mui-control-item" href="#item2mobile">
							肉禽蛋类
						</a>
						<a class="mui-control-item" href="#item3mobile">
							水产区
						</a>
						<a class="mui-control-item" href="#item4mobile">
							水果区
						</a>
						<a class="mui-control-item" href="#item5mobile">
							粮油区
						</a>
						<a class="mui-control-item" href="#item6mobile">
							酒水饮料
						</a>
					</div>
					<!-- <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div> -->
					<div class="mui-slider-group">
						<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
							<div id="scroll1" class="mui-scroll-wrapper">
								<div class="mui-scroll">
									<div class="juli">
										<div class="cp">
											<div class="k1" style="margin-bottom: 0.5rem;" id="../home/shopping_show.html">
												<img src="../../images/1.jpg" class="bfb">
												<p class="sbt">sdsdg</p>
												<p class="price">￥<span>12</span>/罐</p>
											</div>
											<div class="k1" style="margin-bottom: 0.5rem;" id="../home/shopping_show.html">
												<img src="../../images/1.jpg" class="bfb">
												<p class="sbt">sdsdg</p>
												<p class="price">￥<span>12</span>/罐</p>
											</div>
											<div class="k1" style="margin-bottom: 0.5rem;" id="../home/shopping_show.html">
												<img src="../../images/1.jpg" class="bfb">
												<p class="sbt">sdsdg</p>
												<p class="price">￥<span>12</span>/罐</p>
											</div>
											<div class="k1" style="margin-bottom: 0.5rem;" id="../home/shopping_show.html">
												<img src="../../images/1.jpg" class="bfb">
												<p class="sbt">sdsdg</p>
												<p class="price">￥<span>12</span>/罐</p>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div id="item2mobile" class="mui-slider-item mui-control-content">
							<div id="scroll2" class="mui-scroll-wrapper">
								<div class="mui-scroll">
									<div class="juli">
										<div class="cp">
											<div class="k1" style="margin-bottom: 0.5rem;" id="../home/shopping_show.html">
												<img src="../../images/1.jpg" class="bfb">
												<p class="sbt">sdsdg</p>
												<p class="price">￥<span>12</span>/罐</p>
											</div>
											<div class="k1" style="margin-bottom: 0.5rem;" id="../home/shopping_show.html">
												<img src="../../images/1.jpg" class="bfb">
												<p class="sbt">sdsdg</p>
												<p class="price">￥<span>12</span>/罐</p>
											</div>
											<div class="k1" style="margin-bottom: 0.5rem;" id="../home/shopping_show.html">
												<img src="../../images/1.jpg" class="bfb">
												<p class="sbt">sdsdg</p>
												<p class="price">￥<span>12</span>/罐</p>
											</div>
										</div>
									</div>
								</div>
							</div>

						</div>
						<div id="item3mobile" class="mui-slider-item mui-control-content">
							<div id="scroll3" class="mui-scroll-wrapper">
								<div class="mui-scroll">
									<div class="juli">
										<div class="cp">
											<div class="k1" style="margin-bottom: 0.5rem;" id="../home/shopping_show.html">
												<img src="../../images/1.jpg" class="bfb">
												<p class="sbt">sdsdg</p>
												<p class="price">￥<span>12</span>/罐</p>
											</div>
											<div class="k1" style="margin-bottom: 0.5rem;" id="../home/shopping_show.html">
												<img src="../../images/1.jpg" class="bfb">
												<p class="sbt">sdsdg</p>
												<p class="price">￥<span>12</span>/罐</p>
											</div>
										</div>
									</div>
								</div>
							</div>

						</div>
						<div id="item4mobile" class="mui-slider-item mui-control-content">
							<div id="scroll4" class="mui-scroll-wrapper">
								<div class="mui-scroll">
									<div class="juli">
										<div class="cp">
											<div class="k1" style="margin-bottom: 0.5rem;" id="../home/shopping_show.html">
												<img src="../../images/1.jpg" class="bfb">
												<p class="sbt">sdsdg</p>
												<p class="price">￥<span>12</span>/罐</p>
											</div>
											<div class="k1" style="margin-bottom: 0.5rem;" id="../home/shopping_show.html">
												<img src="../../images/1.jpg" class="bfb">
												<p class="sbt">sdsdg</p>
												<p class="price">￥<span>12</span>/罐</p>
											</div>
											<div class="k1" style="margin-bottom: 0.5rem;" id="../home/shopping_show.html">
												<img src="../../images/1.jpg" class="bfb">
												<p class="sbt">sdsdg</p>
												<p class="price">￥<span>12</span>/罐</p>
											</div>
										</div>
									</div>
								</div>
							</div>
						
						</div>
						<div id="item5mobile" class="mui-slider-item mui-control-content">
							<div id="scroll5" class="mui-scroll-wrapper">
								<div class="mui-scroll">
									<div class="juli">
										<div class="cp">
											<div class="k1" style="margin-bottom: 0.5rem;" id="../home/shopping_show.html">
												<img src="../../images/1.jpg" class="bfb">
												<p class="sbt">sdsdg</p>
												<p class="price">￥<span>12</span>/罐</p>
											</div>
											<div class="k1" style="margin-bottom: 0.5rem;" id="../home/shopping_show.html">
												<img src="../../images/1.jpg" class="bfb">
												<p class="sbt">sdsdg</p>
												<p class="price">￥<span>12</span>/罐</p>
											</div>
										</div>
									</div>
								</div>
							</div>
						
						</div>
						<div id="item6mobile" class="mui-slider-item mui-control-content">
							<div id="scroll6" class="mui-scroll-wrapper">
								<div class="mui-scroll">
									<div class="juli">
										<div class="cp">
											<div class="k1" style="margin-bottom: 0.5rem;" id="../home/shopping_show.html">
												<img src="../../images/1.jpg" class="bfb">
												<p class="sbt">sdsdg</p>
												<p class="price">￥<span>12</span>/罐</p>
											</div>
											<div class="k1" style="margin-bottom: 0.5rem;" id="../home/shopping_show.html">
												<img src="../../images/1.jpg" class="bfb">
												<p class="sbt">sdsdg</p>
												<p class="price">￥<span>12</span>/罐</p>
											</div>
											<div class="k1" style="margin-bottom: 0.5rem;" id="../home/shopping_show.html">
												<img src="../../images/1.jpg" class="bfb">
												<p class="sbt">sdsdg</p>
												<p class="price">￥<span>12</span>/罐</p>
											</div>
										</div>
									</div>
								</div>
							</div>
						
						</div>
					</div>
				</div>
			</div>
		</div>

		<script src="../../js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/vue.js"></script>
		<script src="../../js/common.js" type="text/javascript" charset="utf-8"></script>
		<!--搜索-->
		<script type="text/javascript">
			$(function() {
				var $searchBar = $('#searchBar'),
					$searchText = $('#searchText'),
					$searchInput = $('#searchInput'),
					$searchClear = $('#searchClear'),
					$searchCancel = $('#searchCancel');

				function hideSearchResult() {
					$searchInput.val('');
				}

				function cancelSearch() {
					hideSearchResult();
					$searchBar.removeClass('ui-search-bar_focusing');
					$searchText.show();
				}

				$searchText.on('click', function() {
					$searchBar.addClass('ui-search-bar_focusing');
					$searchInput.focus();
				});
				$searchInput.on('blur', function() {
						if (!this.value.length) cancelSearch();
					});
				$searchClear.on('click', function() {
					hideSearchResult();
					$searchInput.focus();
				});
				$searchCancel.on('click', function() {
					cancelSearch();
					$searchInput.blur();
				});
			});

			mui.init({
				swipeBack: false
			});
			(function($) {
				$('.mui-scroll-wrapper').scroll({
					indicators: true //是否显示滚动条
				});
// 				document.getElementById('slider').addEventListener('slide', function(e) {
// 					if (e.detail.slideNumber === 1) {
// 						if (item2.querySelector('.mui-loading')) {
// 							setTimeout(function() {
// 								item2.querySelector('.mui-scroll').innerHTML = html2;
// 							}, 500);
// 						}
// 					} else if (e.detail.slideNumber === 2) {
// 						if (item3.querySelector('.mui-loading')) {
// 							setTimeout(function() {
// 								item3.querySelector('.mui-scroll').innerHTML = html3;
// 							}, 500);
// 						}
// 					}
// 				});
				var sliderSegmentedControl = document.getElementById('sliderSegmentedControl');
				$('.mui-input-group').on('change', 'input', function() {
					if (this.checked) {
						sliderSegmentedControl.className =
							'mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-' + this.value;
						//force repaint
						sliderProgressBar.setAttribute('style', sliderProgressBar.getAttribute('style'));
					}
				});
			})(mui);
			
			
			
			
			
			mui.plusReady(function() {
				// 获取分类商品ID
				var self = plus.webview.currentWebview();
			 
			});
			
			// TODO:分类商品详情
			var vm = Vue({
				el : #app,
				data : {
					
				},
				methods : {
					 init(){
					    // 搜索设置
					    this.searchSet();
					    // 获取分类数据
					    this.getClassData();
					},
				},
			});
			vm.init();
			mui(".ui-content").on("tap", ".k1", function() {
				var url = this.getAttribute("id"); //getAttribute()获取属性函数
				mui.openWindow({
					url: url,
					id: url,
					styles: {
						top: '0px', //新页面顶部位置
						bottom: '0px', //新页面底部位置
						popGesture: 'close'
					},
					extras: {},
					waiting: {
						autoShow: false
					}
				})
			});
		</script>
	</body>

</html>
